<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elysia</title>
    <style>
         body{
            background-color: aliceblue;
            width: 1000px;
            height: 500px;
        }
       .ailiyyds{
            width: 100px;
            height: 100px;
            position: relative;
            animation: aili 10s linear 0s infinite alternate;
            transition: width 1s, height 1s;
        }
        @keyframes aili{
           0%{left: 0px;top: 0px;}
           50%{left: 1000px;top: 250px;}
           100%{left: 0px;top: 500px;}
        }
       
        #img:hover{
            width: 200px;
            height: 200px;
            background-color: aliceblue;
            transition: width 1s, height 1s；
        }
    </style>
</head>
<body>
    <div style="position: absolute; left: 0px;">
    <img src="https://uploadstatic.mihoyo.com/contentweb/20210804/2021080419091567049.png" width="1000px" height="500px">
    </div>
    <div>
        <img class="ailiyyds" id="img" src="https://webstatic.mihoyo.com/upload/contentweb/2022/09/27/21031b52530de7e1f447d1999fdf7687_7651660074082305936.png" width="100px" height="100px">
    </div>
</body>
</html>
